viewpager2是一個滑動式的頁面,可以想成是一個主頁面當作主容器,放入了多個不同的頁面當作子容器,左右翻動就可以看到不同的頁面,常用於圖片瀏覽器、瀏覽引導介面等,接下來就看看程式碼
首先我這邊是先做一個tablayout,讓他除了能用滑動的方式,也可以直接點擊跳至想要的畫面,話不多說,馬上來看看
首先,先來看一下XML
<com.google.android.material.tabs.TabLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Monday" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tuesday" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Wednesday" />
</com.google.android.material.tabs.TabLayout>
這邊的範例我放了三個tabitem,需要更多的話可以自己增加。
再來就是要來做頁面,有幾個tabitem就要做幾頁fragment
Activity程式碼
public class MainActivity extends AppCompatActivity {
private TabLayout tabLayout;
private ViewPager2 viewPager2;
private MyAdapter myAdapter;
private String[] tab_title = {"第一頁","第二頁","第三頁"};
@SuppressLint("MissingInflatedId")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tabLayout = findViewById(R.id.tabLayout);
viewPager2 = findViewById(R.id.viewPager);
myAdapter = new MyAdapter(this);
viewPager2.setAdapter(myAdapter);
new TabLayoutMediator(tabLayout, viewPager2, true,true, new TabLayoutMediator.TabConfigurationStrategy() {
@Override
public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
viewPager2.setCurrentItem(tab.getPosition());
}
}).attach();
for(int i = 0 ; i < tabLayout.getTabCount() ; i++){
tabLayout.getTabAt(i).setText(tab_title[i]);
}
}
}
這邊我做了一個Adapter去綁定資料
以下是Adapter的程式碼
public class MyAdapter extends FragmentStateAdapter {
public MyAdapter(@NonNull FragmentActivity fragmentActivity) {
super(fragmentActivity);
}
@NonNull
@Override
public Fragment createFragment(int position) {
if (position == 0){
return new PageFragment1();
}
else if (position == 1){
return new PageFragment2();
}
else {
return new PageFragment3();
}
}
@Override
public int getItemCount() {
return 3;
}
}
成果如下